<template>
    <input :type="type" :placeholder="placeHolder" style="border: 0;height: 36px;outline: none;font-size: 16px;" :value="modelValue" @input="onInput" :style="{
        borderBottom: error ? '1px solid red' : '1px solid rgb(102, 102, 102)',
        color: error ? 'red' : 'black'
    }" />
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    },
    error: {
        type: Boolean,
        default: false,
    },
    placeHolder: {
        type: String,
        default: ''
    },
    type:{
        type:String,
        default:'text'
    }
})

const emit = defineEmits(['update:modelValue'])

const onInput = (event) => {
    emit('update:modelValue', event.target.value)
}

onMounted(() => {

})

</script>

<style scoped></style>